; (function () {
  // 全局阻止浏览器默认动作
  let app = document.querySelector('.app')
  app.addEventListener('touchstart', function (event) {
    event.preventDefault();
  })

  // 恢复链接跳转
  var aNode = document.querySelectorAll('.a[href]'); //获取所有的链接
  aNode.forEach(function (item) {
    // 监听事件
    item.addEventListener('touchend', function (event) {
      location.href = this.href;
    })
  })
})();

// 实现移动端屏幕适配
(function () {
  // 获取视口宽度
  var viewW = document.documentElement.clientWidth;
  // 计算字体大小
  var fontSize = viewW / 16;
  // 设置根元素的字体大小
  document.documentElement.style.fontSize = fontSize + 'px';
})();

// header
(function () {
  // 重新获取input焦点
  let input = document.querySelector('#header input');
  input.addEventListener('touchstart', function (event) {
    this.focus(); //手动获取焦点
    event.stopPropagation(); // 阻止冒泡
    event.preventDefault() // 阻止默认动作
  })
  document.addEventListener('touchstart', function (event) {
    input.blur()  //手动取消焦点
  })

  // 菜单按钮
  let menuBtn = document.querySelector('#header .menu-btn');
  let menuList = document.querySelector('#header .menu-list')
  menuBtn.addEventListener('touchstart', function (event) {
    this.classList.toggle('open')
    menuList.classList.toggle('open')
    event.stopPropagation()
    event.preventDefault()
  })
  // 触摸其他地方，收起菜单
  document.addEventListener('touchstart', function (event) {
    menuBtn.classList.remove('open')
    menuList.classList.remove('open')
  })
  menuList.addEventListener('touchstart', function (event) {
    event.stopPropagation()
    event.preventDefault()
  })

  var btnGroup = document.querySelectorAll('#header .btn-group button')
  btnGroup.forEach(function (item, i) {
    // console.log(btnGroup)
    item.addEventListener('touchstart', function (event) {
      btnGroup.forEach(function (item, i) {
        btnGroup[i].classList.remove('btn-search')
      })
      btnGroup[i].classList.add('btn-search')

    })

  })
  // console.log(btnGroup)
  // for (var i = 0; i < btnGroup.length; i++) {
  //   btnGroup[i].addEventListener('touchstart', function (event) {
  //     console.log(i)
  //     alert('aa')
  //   })
  // }

})();

// 主体内容

// 导航可拖动功能 
(function () {
  let nav = document.querySelector('#main .nav')
  let navList = nav.querySelector('.nav-list')

  // 开启3D加速
  transformCss(navList, 'translateZ', 0)
  nav.addEventListener('touchstart', function (event) {
    let touch = event.changedTouches[0];  //获取触摸对象
    this.startX = touch.clientX;  //  记录触点的开始位置
    this.eleX = transformCss(navList, 'translateX');  //navList初始位置
    this.startTime = (new Date).getTime();
    this.disX = 0;      //bug  如果不一开始设置值 在第一次只是点击的时候 disX是空值  会出现elex为NaN
    navList.style.transition = 'none'
  })

  nav.addEventListener('touchmove', function (event) {
    let touch = event.changedTouches[0];  //  获取触点对象
    let endX = touch.clientX; // 获取计算触点的结束位置
    this.disX = endX - this.startX;  //  手指滑动的距离

    // 计算navList的偏移量，起始位置+手指划过的距离
    let translateX = this.eleX + this.disX;

    // 设置范围
    if (translateX >= 0) {
      // translateX = 0;
      // 实现弹簧效果   由左向右拖动 实现比例减小 scale
      let scale = 1 - translateX / (nav.clientWidth * 2);
      // 重新计算transformX
      translateX = scale * translateX
    } else if (translateX < nav.clientWidth - navList.offsetWidth) {
      // translateX = nav.clientWidth - navList.offsetWidth;
      //  左边的起始位置是0  而 右边的起始位置是(nav, clientWidth - navList.offsetWidth)  所以不能按照左边的来
      // 计算滑出右边的偏移量
      let rightX = nav.clientWidth - (navList.offsetWidth + translateX)
      // 计算比例
      let scale = 1 - rightX / (nav.clientWidth * 2)
      // 重新计算
      translateX = (nav.clientWidth - navList.offsetWidth) - rightX * scale
    }

    // 设置navList偏移
    transformCss(navList, 'translateX', translateX)
  })

  nav.addEventListener('touchend', function (event) {
    let endTime = (new Date).getTime(); // 获取结束的时间
    let disTime = endTime - this.startTime; //  获取时间差
    let speed = this.disX / disTime * 200;  // 速度

    // 获取当前的位置
    let translateX = transformCss(navList, 'translateX')

    // 给偏移量加速
    translateX += speed;

    // 范围限制
    var bezier = '';
    if (translateX >= 0) {
      translateX = 0
      bezier = 'cubic-bezier(0.08, 1.44, 0.6, 1.46)';
    } else if (translateX <= nav.clientWidth - navList.offsetWidth) {
      translateX = nav.clientWidth - navList.offsetWidth
      bezier = 'cubic-bezier(0.08, 1.44, 0.6, 1.46)';
    }
    // 过渡
    navList.style.transition = '.6s transform ' + bezier;
    // 重新计算
    transformCss(navList, 'translateX', translateX)
  })
})();

// 导航可点击
(function () {
  // 获取元素
  let navItems = document.querySelectorAll('.nav .nav-list li');
  let isSwiper = false;
  // 给每个导航元素监听
  navItems.forEach(function (navItem) {

    // 监听touchmove操作
    navItem.addEventListener('touchmove', function (event) {
      // 标记导航正在滑动
      isSwiper = true;
    })

    // 监听touchend
    navItem.addEventListener('touchend', function (event) {
      // 如果导航正在滑动
      if (isSwiper) {
        isSwiper = false;
        return;
      }
      // 给所有的导航取消选中
      navItems.forEach(function (item) {
        item.classList.remove('active');
      })
      // 当前点击的导航选中状态
      this.classList.add('active')
    })
  })
})();

// 轮播图
(function () {
  swiper({
    el: document.querySelector('.swiper'),
    page: document.querySelector('.page'),
    isAutoPlay: true,
    gpu: true
  })

})();


// tab可拖动
(function () {
  // 获取所有的tab对象
  let tabs = document.querySelectorAll('#main .tab');
  // 遍历 每一个都调用函数
  tabs.forEach(function (item) {
    swiperTab(item);
  });

  function swiperTab(tabNode) {
    let tabContent = tabNode.querySelector('.tab-content');
    let tabList = tabContent.querySelector('.tab-list')
    let tabLoading = tabContent.querySelectorAll('.tab-loading')
    let tabNavItems = tabNode.querySelectorAll('.tab-nav a')
    let activeBorder = tabNode.querySelector('.active-border')
    let index = 0;

    // 计算每一个项目的宽度
    let itemWidth = tabList.offsetWidth;

    // 开启3D加速
    transformCss(tabContent, 'translateZ', 0);
    transformCss(activeBorder, 'translateZ', 0);

    // tabContent 位移变化 显示中间的tabList
    transformCss(tabContent, 'translateX', -itemWidth)

    tabList.addEventListener('touchstart', function (event) {
      let touch = event.changedTouches[0];
      this.startX = touch.clientX;
      this.eleX = transformCss(tabContent, 'translateX');
      this.dstX = 0;

      tabContent.style.transition = 'none';

      // 把加载的图片隐藏
      tabLoading.forEach(function (item) {
        item.style.opacity = 0;
      })
    })

    tabList.addEventListener('touchmove', function (event) {
      let touch = event.changedTouches[0];
      let endX = touch.clientX; //触点结束位置
      this.dstX = endX - this.startX;  //触点滑动的距离

      // 计算偏移量
      let translateX = this.eleX + this.dstX;

      // 如果滑动的距离超过一半就直接跳转  滑动的距离没有超过一半就返回
      if (Math.abs(this.dstX) >= itemWidth / 2) {
        tabContent.style.transition = '0.5s';
        if (this.dstX < 0) {
          translateX = -itemWidth * 2;
        } else if (this.dstX > 0) {
          translateX = 0;
        }
      }

      // 设置偏移量
      transformCss(tabContent, 'translateX', translateX)
    })

    tabList.addEventListener('touchend', function (event) {
      // 如果滑动到一半
      if (Math.abs(this.dstX) < itemWidth / 2) {
        tabContent.style.transition = '0.5s';
        transformCss(tabContent, 'translateX', -itemWidth)
      }
    });

    // 阻止tabLoading 的频繁冒泡
    tabLoading.forEach(function (item) {
      item.addEventListener('transitionend', function (event) {
        event.stopPropagation()
      })
    })

    // 监听过渡结束
    tabContent.addEventListener('transitionend', function (event) {
      // let translateX = transformCss(tabContent, 'translateX')
      if (transformCss(tabContent, 'translateX') === -itemWidth) {
        return;
      }
      tabLoading.forEach(function (item) {
        item.style.opacity = 1;
      })

      console.log(index)
      // 切换tab导航
      if (tabList.dstX < 0) {
        index++
      } else if (tabList.dstX > 0) {
        index--;
      }

      // 判断index的范围
      if (index < 0) {
        index = tabNavItems.length - 1;
      } else if (index > tabNavItems.length - 1) {
        index = 0;
      }
      // 改变tab底部
      transformCss(activeBorder, 'translateX', index * tabNavItems[0].offsetWidth);

      setTimeout(function () {
        tabContent.style.transition = 'none';
        transformCss(tabContent)

        // 将原来的图片重新设置位移
        transformCss(tabContent, 'translateX', -itemWidth)

        // tabLoading 隐藏
        tabLoading.forEach(function (item) {
          item.style.opacity = 0;
        })
      }, 2000)
    });
  }
})()

// 3D加速  gpu加速
// 只有使用了3D变换才会启用
// transform translate3D() translateZ() scaleZ() rotateX() rotateY() rotateZ() skew3D() skewZ()



